<template>
  <!-- 展示歌曲的主体 -->
  <div class="box-list">
    <!-- 遍历出数据的主体 这里的listStyle主要是用来传送数据-->
    <div class="list" v-for="(item,index) in musicDataList" :key="item.id" @click="listStyle(index,item.musicName,item.musicSinger)">
      <!-- 数据的点击播放这里的play主要是用来播放歌曲 -->
      <ul ref="list" @click="play(item.id)">
        <!-- 数据的序列 -->
        <!--  eslint-disable-next-line vue/no-parsing-error -->
        <li>{{index <= 9 ? '0'+(index+1):index+1}}</li>
        <!-- 显示歌曲的名称 -->
        <li>{{item.musicName }}</li>
        <!-- 播放 -->
        <li class="play"><span>播放</span></li>
        <!-- 显示歌手 -->
        <li>{{item.musicSinger}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
// 导入vuex中的数据
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
    }
  },
  methods: {
    // 使用vuex中的数据
    ...mapMutations(['getMusicListName', 'getMusicListName2', 'getUrl', 'getId', 'getDataIndex', 'addIndex', 'ductionIndex']),
    // 传送数据与改变ul中的点击样式
    listStyle (id, musicName, musicSinger) {
      this.fontColor()
      // 传送数据给getMusicListName 里面是歌名
      this.getMusicListName(musicName)
      // 传送数据给getMusicListName 里面是歌手姓名
      this.getMusicListName2(musicSinger)
      // 获取当前点击的index值
      this.getDataIndex(id)
    },
    async play (id) {
      const { data: res } = await this.$http.get('/song/url?id=' + id)
      console.log(res.data[0].url)
      this.getUrl(res.data[0].url)
      this.getId(id)
    },
    // 点击改变字体颜色的方法
    fontColor () {
      // 获取list使其class的样式初始化
      this.$refs.list.forEach(val => {
        val.className = ''
      })
      // 设置点击后的样式
      this.$refs.list[this.index].className = 'bianse'
    },
    handleCurrentChange () {},
    handleSizeChange () {}
  },
  computed: {
    ...mapState(['musicDataList', 'index'])
  },
  watch: {
    index () {
      // 调用index加加的方法
      this.addIndex()
      // 调用index减减的方法
      this.ductionIndex()
      // 调用点击改变字体颜色的方法
      this.fontColor()
    }
  }
}
</script>

<style scoped>
.box-list {
  height: 350px;
  overflow: scroll ;
}
.list {
  color: #6a6d72;
  margin-top: 20px;
}
.list span:nth-child(1) {
  margin-left: 0;
}
ul {
  display: flex;
  color: #6a6d72;
  cursor: pointer;
}
li {
  flex: 1;
  margin-left: 10px;
}
.play span {
  display: inline-block;
  width: 70px;
  height: 30px;
  border: 1px solid #6a6d72;
  border-radius: 10px;
  font-size: 12px;
  text-align: center;
  line-height: 30px;
}
ul:hover {
  color: #1f8f09;
}
.bianse {
  color: #8f7f09;
  background-color: rgb(63, 63, 63);
  line-height: 30px;
}
::-webkit-scrollbar {
display: none;
}
</style>
